<template>
  <div class="main">
    <div class="top">
      <div class="uc-header">
        <div class="back" @click="$router.back()">
          <img src="@/assets/img/3.png" />
        </div>
        <div class="inputbox">
          <!-- Enter country name or area code -->
          <van-search
            v-model="value"
            @input="search"
            :placeholder="valuePlaceholder"
          />
        </div>
      </div>
      <div class="country-title">
        <span>{{ $t("Negara") }}</span> <span>{{ $t("KodeArea") }}</span>
      </div>
    </div>
    <div class="list">
      <div class="item" v-for="(v, i) in list" :key="i" @click="back(v)">
        <div>{{ v.country }}</div>
        <div>{{ v.area_code }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { httpGetPhoneAreaCode } from "@/http/api";

export default {
  name: "phoneNumber",
  data() {
    return {
      list: [],
      oldlist: [],
      value: "",
    };
  },
  created() {
    this.getHttpGetPhoneAreaCode();
  },
  methods: {
    async getHttpGetPhoneAreaCode() {
      let res = await httpGetPhoneAreaCode();
      if (res.code == 0) {
        this.list = res.data || [];
        this.oldlist = res.data || [];
      }
    },
    search() {
      if (this.value.trim()) {
        // let list = [];
        // this.oldlist.forEach(v=>{
        // })

        this.list = this.oldlist.filter((v) => {
          return (
            v.country.indexOf(this.value) > -1 ||
            v.area_code.indexOf(this.value) > -1
          );
        });
      } else {
        this.list = this.oldlist;
      }
    },
    back(v) {
      localStorage.setItem("areaCode", v.area_code);
      this.$router.push({
        name:
          this.$route.query.type == 1
            ? this.$t("login")
            : this.$route.query.type == 3
            ? this.$t("resetPassword")
            : this.$t("register"),
        query: {
          selectType: this.$route.query.selectType,
        },
      });
    },
  },
};
</script>

<style lang="less" scoped>
* {
  color: #ffff;
}

.main {
  .top {
    position: sticky;
    // background: #fff;
    top: 0;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
  }

  .inputbox {
    width: 610px;
    background-color: #f7f8fa;
    position: relative;
    left: 30px;

    .van-search {
      padding: 0;
      // color: aqua;
    }
  }

  .country-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30px 40px;
  }

  .list {
    width: 100%;
    padding: 0 40px;

    .item {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      user-select: none;
      height: 100px;
      border-bottom: 1px solid #eee;
    }
  }
}
</style>
